<template>
  <div class="login">
    <form class="login-form">
      <h1 style="text-align: center;margin-bottom: 30px;">登录</h1>
      <div class="form-item">
        <input class="txt" placeholder="请输入用户名" v-model="loginForm.username">
      </div>

      <div class="form-item">
        <input class="txt" placeholder="请输入密码" v-model="loginForm.password">
      </div>

      <div class="form-item">
        <button @click.prevent="login">登录</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

defineOptions({name: 'login'})

const loginForm = reactive({
  username: 'admin',
  password: '123456'
})

const $router = useRouter();
const $store = useStore()

const login = () => {
  if (loginForm.username === 'admin' && loginForm.password === '123456') {
    $store.dispatch('user/getInfo')
    $router.replace("/user")
  } else {
    window.alert("账密错误，请重新登录")
  }
}
</script>

<style scoped>
.login {
  background: lightseagreen;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>